<template>
    <div class="storeContainer">
        <p class="title">多囊商城</p>
        <div class="banner">
            <van-search v-model="value" placeholder="搜索" shape="round" background="#F6F8FA" class="search" @search="searchGoods(value)"/>
            <div class="shopImg" @click="gotoShop"></div>
        </div>
        <van-swipe :autoplay="3000" class="my-swipe">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <div class="swipeImg" :style="swipeImg(index)"></div>
            </van-swipe-item>
        </van-swipe>
        <div class="goodsContainer">
            <ul class="goods">
                <li v-for="good in goods" :key="good.id">
                    <div class="good">
                        <div class="showImg" :style="showBackImg(good.id)"></div>
                        <p class="intro">{{ good.name }} {{ good.description }}</p>
                        <div class="tag">
                            <div class="priceImg" :style="{backgroundImage:'url('+backImg(good)+')'}"></div>
                            <div class="typeImg" :style="{backgroundImage:'url('+typeBackImg(good)+')'}"></div>
                        </div>
                        <div class="price">
                            <p class="index">￥</p>
                            <p class="num">{{ good.price }}</p>
                            <p class="other">起</p>
                        </div>
                        <router-link :to="{
                            name:'goodDetail',
                            query:{
                                // title:good.intro,
                                // num:good.num,
                                // gtype:good.gtype,
                                // gprice:good.gprice,
                                id:good.id
                            }
                        }">
                            <div class="card"></div>
                        </router-link>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import { Search,Swipe, SwipeItem } from 'vant';
    import axios from 'axios';
    export default {
        name:'myStore',
        components:{
            'van-search':Search,
            'van-swipe':Swipe,
            'van-swipe-item':SwipeItem,
        },
        data(){
            return{
                value:'',
                images: [
                    'https://sky-take-out-xyu.oss-cn-hangzhou.aliyuncs.com/20240530192503.jpg',
                    'https://sky-take-out-xyu.oss-cn-hangzhou.aliyuncs.com/20240530192457.jpg',
                ],
                goods:[
                    // {id:1,intro:'低糖水果 蓝莓西柚 现摘现发 新鲜水果',num:38.8,price:'6-8good',gtype:'6-1fruit'},
                    // {id:2,intro:'无糖豆浆粉原味无添加剂早餐 黄豆粉',num:28.8,price:'6-9cheap',gtype:'6-2drink'},
                    // {id:3,intro:'坚果 巴旦木核桃 优质脂肪 每日坚果',num:48.8,price:'6-9cheap',gtype:'6-3eat'},
                    // {id:4,intro:'卫生巾 女性生理期卫生用品 卫生巾特惠',num:28.8,price:'6-9cheap',gtype:'6-4life'},
                ]
            }
        },
        computed:{
            backImg(){
                return (good) =>{
                    return require(`../assets/img/6-icon@2x/6-9cheap.png`)
                }
            },
            typeBackImg(){
                return (good)=>{
                    return require(`../assets/img/6-icon@2x/6-1fruit.png`)
                }
            }
        },
        methods:{
            swipeImg(index){
                return `backgroundImage:url(${this.images[index]})`
            },
            gotoShop(){
                this.$router.push({
                    name:'shoppingCard'
                })
            },
            showBackImg(id){
                for(let i=0;i<this.goods.length;i++){
                    if(this.goods[i].id==id){
                        return `backgroundImage:url(${this.goods[i].image})`
                    }
                }
            },
            // addCard(id){
            //     for(let i=0;i<this.goods.length;i++){
            //         if(id===this.goods[i].id){
            //             this.$bus.$emit('addCard',this.goods[i])
            //         }
            //     }
            // }
            gotoDetail(){
                this.$router.push({
                    name:'goodDetail'
                })
            },
            searchGoods(value){
                axios({
                    method:'get',
                    url:`http://localhost:8080/polycystic/goods/list?name=${value}`,
                    headers:{
                        token:localStorage.getItem('jwt')
                    }
                }).then(res=>{
                    this.goods=res.data.data
                })
            }
        },
        mounted(){
            axios({
                method:'get',
                url:'http://localhost:8080/polycystic/goods/list',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.goods=res.data.data
                for(let i=0;i<this.goods.length;i++){
                    this.goods[i].gprice='6-9cheap'
                    this.goods[i].gtype='6-1fruit'
                }
            })
        }
    }
</script>

<style scoped>
    .storeContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .title{
        width: 100%;
        height: 1.76rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
        position: fixed;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .banner{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 1.76rem;
    }
    .shopImg{
        width: .72rem;
        height: .72rem;
        background-image: url(../assets/img/6-icon@2x/6-11card.png);
        background-position: center;
        background-size: contain;
    }
    .my-swipe{
        margin-top: .2rem;
        margin-left: .32rem;
        width: 6.86rem;
        height: 2.2rem;
        border-radius: .3rem;
    }
    .banner .search{
        padding: 0;
        width: 5.9rem;
    }
    .goodsContainer{
        margin-top: .4rem;
        width: 100vw;
        margin-left: .12rem;
        padding-bottom: 16rem;
        margin-bottom: 200px;
    }
    .goods{
        width: 100vw;
    }
    .good{
        width: 3.33rem;
        height: 220px;
        float: left;
        background-color: #FFF;
        margin-bottom: .2rem;
        margin-left: .2rem;
        border-radius: .2rem;
        position: relative;
    }
    .showImg{
        width: 100%;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;
        height: 120px;
        background-color: #F6F8FA;
        /* border: 1px solid #333333; */
        background-position: center;
        background-size: cover;
    }
    .intro{
        text-align:left;
        width: 85%;
        margin: 0 auto;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .28rem;
        margin-top: .1rem;
    }
    .tag{
        display: flex;
        align-items: center;
        margin-left: .3rem;
        margin-top: .1rem;
    }
    .priceImg{
        width: .44rem;
        height: .28rem;
        background-position: center;
        background-size: contain;
    }
    .typeImg{
        width: .8rem;
        height: .26rem;
        background-position: center;
        background-size: contain;
        margin-left: .1rem;
    }
    .price{
        margin-left: .3rem;
        margin-top: .1rem;
        color:#FB4866;
        display: flex;
        align-items:end;
        overflow: hidden;
    }
    .index{
        font-family: 'PingFangSC-Regular';
        font-size: 12px;
    }
    .num{
        font-family: 'PingFangSC-Bold';
        font-size: 16px;
    }
    .other{
        font-family: 'PingFangSC-Regular';
        color:#33333368;
        font-size: 12px;
    }
    .card{
        width: .44rem;
        height: .44rem;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-10addCard.png);
        position: absolute;
        right: .3rem;
        bottom: .3rem;
    }
    .swipeImg{
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
    }
</style>